<template>
	<view style="background-color: #dddee3;height: 100%;">
		<view class="tishi">
			<p>温馨提示：一个手机号只能绑定一个账号，更换后可以使用新手机号登录此账号。对于已绑定其他账号的手机号，本次操作后将与员账号解绑。</p>
		</view>
		<view style="padding-top: 20px;">
			<view class="kuang">
				<image :src="ShoujiURL" style="width: 480rpx;height: 440rpx;"></image>
				<view>
					<p style="margin-top: 15rpx;margin-left: 25%;">设置新手机号</p>
					<u-line color="#000000"></u-line>
				</view>
				<u--input placeholder="请输入更换手机号" border="surround" clearable v-model="phone" @change="change"
					style="width: 300rpx;"></u--input>
				<view style="padding-top: 30rpx;width: 300rpx;">
					<u-code-input @change="change3" @finish="finish" :maxlength="4" :space="3" mode="line"
						color="#1ac4ff" borderColor="#1ac4ff"></u-code-input>
				</view>
				<view class="wrap2">
					<u-toast ref="uToast"></u-toast>
					<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-code>
					<u-button @click="getCode" type="primary" :plain="true" text="镂空">{{tips}}</u-button>
				</view>
				<view>
					<u-modal :show="show" :title="title" :content='content' @confirm="confirm" @cancel="cancel"
						showCancelButton="true" width="500rpx"></u-modal>
					<view style="margin-top: 50rpx;">
						<u-button type="primary" :plain="true" @click="Yanzheng()" text="确认修改手机号"></u-button>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {
		restTelephoneApi
	} from '../../../api/myModel';
	export default {
		data() {
			return {
				ShoujiURL:this.$baseURL + '/profile/upload/2025/05/10/shouji_20250507101040A029_20250510150316A036.png',
				tips: '',
				seconds: 60,
				password: true,
				show: false,
				content: '', //弹窗内容
				yanz1: '',
				yanz2: 1,
				phone: "",
				restTelephoneData: {
					telephone: ""
				},
				model1: {
					user: {
						phones: '', //手机号
						yanzhengm: '', //验证码
					}
				},
			}
		},
		// onLoad(option) {
		// 	this.phone=option.telephone

		// },

		methods: {
			change3(e) {
				this.yanz1 = 0;
				console.log('内容改变，当前值为：' + e);
			},
			finish(e) {
				this.yanz1 = 1;
				this.model1.user.yanzhengm = e;
				console.log('输入结束，当前值为：' + e);
			},
			confirm() {
				if (this.yanz2 == 2) {
					this.show = false;
					this.restTelephoneData.telephone = this.phone;
					console.log(this.restTelephoneData.telephone);
					restTelephoneApi(this.restTelephoneData).then((res) => {
						if (res.code == "200") {
							// 现在修改成功后页面直接跳转，用户没法看修改成功这个弹框
							// 你看看你能不能想办法让用户知道修改成功
							uni.showToast({
								title: '修改成功',
								icon: 'success',
								duration: 2000
							});
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/myModel/my/my'
								});
							}, 1500)


						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							});

						}



					})
				} else if (this.yanz2 == 1) {
					this.show = false;
				}


			},

			close() {
				this.show = !this.show;
				// console.log('close');
			},
			change(e) {
				this.model1.user.phones = e;
				console.log('change', e);
			},
			change1(e) {
				console.log('change1', e);
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				uni.$u.toast('倒计时结束');
			},
			start() {
				uni.$u.toast('倒计时开始');
			},
			cancel() {
				this.show = false;
			},
			Yanzheng() {
				if (!/^1[3-9]\d{9}$/.test(this.model1.user.phones)) {
					this.content = "手机号格式不正确";
					this.show = true;
					this.yanz2 = 1;
				} else {
					if (this.yanz1 == 1) {
						this.content = "修改手机号后，如果忘记密码，需手机验证重新修改";
						this.show = true;
						this.yanz2 = 2;
					} else if (this.yanz1 == 0) {
						this.content = "请输入4位验证码";
						this.title = "",
							this.show = true;
						this.yanz2 = 1;
					}

				}
			}
		}
	}
</script>

<style lang="scss">
	.kuang {
		padding: 60rpx;
		font-size: 40rpx;
		color: #000000;
		background-color: #ffffff;
		height: 820rpx;
		width: 500rpx;
		border-radius: 30rpx;
		margin: 50rpx;
	}

	.wrap2 {
		width: 195rpx;
		float: right;
		margin-top: -70rpx;
		z-index: 9;
	}

	.u-input--radius.data-v-fdbb9fe6,
	.u-input--square.data-v-fdbb9fe6 {
		margin-top: 30rpx;
	}

	.u-button--plain.data-v-3bf2dba7 {
		margin-top: 20rpx;
	}

	.tishi {
		font-size: 30rpx;
		height: 100rpx;
		width: 85%;
		color: #898a8b;
		margin-left: 7%;
		padding-top: 50rpx;
	}
</style>